<template>
	<div style="height: 100%;" v-loading="loading">
		<el-form :inline="true" :model="search" class="demo-form-inline">
			<el-form-item label="用户名:">
				<el-input v-model="search.display_id" />
			</el-form-item>
			<el-form-item label="区域:">
				<el-input v-model="search.region" />
			</el-form-item>
			<el-form-item label="国家:">
				<el-input v-model="search.country" />
			</el-form-item>
			<el-form-item label="来源:">
				<el-input v-model="search.source" />
			</el-form-item>
			<el-form-item label="金币大于:">
				<el-input v-model="search.coins" />
			</el-form-item>
			<el-form-item label="粉丝大于:">
				<el-input v-model="search.followers" />
			</el-form-item>
			<el-form-item label="关注大于:">
				<el-input v-model="search.following" />
			</el-form-item>
			<el-form-item label="观众大于:">
				<el-input v-model="search.audience" />
			</el-form-item>
			<el-form-item label="类型:">
				<el-input v-model="search.tags" />
			</el-form-item>
			<el-form-item label="查验结果:">
				<el-input v-model="search.verification_result" />
			</el-form-item>
			<el-form-item>
				<el-button type="success" @click="getTable">查询</el-button>
				<el-button type="danger" @click="resetForm">重置</el-button>
			</el-form-item>
		</el-form>
		<div>
			<el-button type="danger" @click="del">删除勾选</el-button>
			<el-button type="danger" @click="clearAll">清空所有数据</el-button>
		</div>
		<el-table ref="tableRef" :data="tableData" :max-height="maxHeight" style="width: 100%"
			@selection-change="handleSelectionChange">
			<el-table-column type="selection" width="55" />
			<el-table-column type="index" width="55" />
			<el-table-column prop="display_id" label="用户名" />
			<el-table-column prop="region" label="区域" />
			<el-table-column prop="country" label="国家" />
			<el-table-column prop="source" label="来源" />
			<el-table-column prop="coins" label="金币" sortable />
			<el-table-column prop="followers" label="粉丝" sortable />
			<el-table-column prop="following" label="关注" sortable />
			<el-table-column prop="audience" label="观众" sortable />
			<el-table-column prop="tags" label="类型" />
			<el-table-column prop="created_at" label="采集时间" sortable />
			<el-table-column prop="updated_at" label="更新时间" sortable />
			<el-table-column prop="verified_time" label="查验时间" sortable />
			<el-table-column prop="verification_result" label="查验结果" />
			<el-table-column prop="uploaded_at" label="上传时间" sortable />
		</el-table>
		<el-pagination v-model:current-page="page" v-model:page-size="pageSize" v-model:total="total"
			:page-sizes="[10, 20, 50, 100, 500, 1000]" size="small" layout="sizes, prev, pager, next, total"
			@update:page-size="handleSizeChange" @update:current-page="handleCurrentChange"
			style="padding-top: 10px;" />
	</div>
</template>

<script setup>
import { onMounted, reactive, ref } from 'vue'
import { ElMessage } from 'element-plus'
import { useTableHeight } from '../../hooks/useTableHeight'

const { tableRef, maxHeight } = useTableHeight()

let total = ref(0)
let loading = ref(false)
let page = ref(1)
let pageSize = ref(50)

const search = reactive({
	display_id: '',
	region: '',
	country: '',
	source: '',
	coins: '',
	followers: '',
	following: '',
	audience: '',
	tags: '',
	verification_result: '',
})

const multipleSelection = ref([])
const tableData = reactive([])

const resetForm = () => {
	search.display_id = ''
	search.region = ''
	search.country = ''
	search.source = ''
	search.coins = ''
	search.followers = ''
	search.following = ''
	search.audience = ''
	search.tags = ''
	search.verification_result = ''
	getTable()
}

const getTable = async () => {
	loading.value = true
	const result = await window.ipcRenderer.invoke('sendMain', JSON.stringify({ type: 'getUsers', value: { search: search, page: page.value, pageSize: pageSize.value } }))
	// console.log(result)
	const totalNumber = await window.ipcRenderer.invoke('sendMain', JSON.stringify({ type: 'getTotal', value: { search: search } }))
	// console.log(totalNumber)
	total.value = totalNumber
	tableData.length = 0
	tableData.push(...result)
	await sleep(500)
	loading.value = false
}

const handleSizeChange = async (value) => {
	pageSize.value = value
	page.value = 1
	await getTable()
}

const del = async () => {
	const ids = multipleSelection.value.map((item) => item.id)
	const result = await window.ipcRenderer.invoke('sendMain', JSON.stringify({ type: 'delUsers', value: ids }))
	if(result){
		ElMessage.success('删除成功!')
	}else{
		ElMessage.error('删除失败!')
	}
	await getTable()
}

const clearAll = async () => {
	const result = await window.ipcRenderer.send('sendMain', JSON.stringify({ type: 'clearAll' }))
	ElMessage.success('删除成功!')
	await getTable()
}

const handleSelectionChange = (val) => {
	multipleSelection.value = val
}

const handleCurrentChange = async (value) => {
	page.value = value
	await getTable()
}

onMounted(async () => {
	await getTable()
	console.log('加载完成')
	setInterval(async () => {
		await getTable()
	}, 30000);
})

const sleep = (ms) => {
	return new Promise((resolve) => setTimeout(resolve, ms));
}
</script>

<style lang="scss" scoped></style>